const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require('path');
module.exports={
  entry:{
    "index":"./src/index.js"
  },
  output:{
    publicPath:"./",
    filename:"js/[name].js",
    path:path.resolve(__dirname,'../dist'),  //获取输出路径
  },   // 整个mode 可以不要，模式是生产坏境就是压缩好对，这里配置开发坏境方便看生成对代码
  module:{
    rules:[
      {
        test:/\.html$/,
        use:[{
          loader:"html-loader"
        }]
      },
      {
        test:/\.css$/,
        use:[{
          loader:MiniCssExtractPlugin.loader,
          options:{publicPath:"../"}
        },"css-loader"]
      },
      {
        test:/\.jpg$|\.png$|\.gif$/,
        use:[{
          loader:"file-loader",
          options:{
            publicPath:"../asset",
            outputPath:"../dist/asset"
        }
        }]
      }
    ]
  },
  resolve:{
    extensions:[".js"]
  },
  plugins:[
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template:"./src/index.html",
      filename:"./index.html",
      chunks:["index"]
    }),
    new MiniCssExtractPlugin({
      filename:"css/[name].css"
    })
  ]
}